<script lang="ts" setup>
import { useFetch } from '@/mobile/hooks/fetch';
import { useAsyncData } from '@/mobile/hooks/async-data';

const { $fetch } = useFetch();
const today = new Date();
const { data: listing } = useAsyncData(
  'home:footer',
  () => $fetch('/footer/getFooterList', { method: 'post' }),
);
</script>

<template>
  <footer class="pb-[env(safe-area-inset-bottom)]">
    <div class="bg-#f7f7f7 p-20">
      <div class="flex flex-shrink-0 justify-between">
        <p class="text-13 text-#8b8b8b font-500 leading-22">{{ $t('mobile.home.footer.contact') }}</p>
        <div class="w-266 break-all text-13 color-hex-8b8b8b font-400 leading-22">
          <div v-for="item in listing" :key="item.id" class="mt-12 first-of-type:(mt-0)">
            {{ item.footerContent }}
          </div>
        </div>
      </div>

      <div class="mt-20 flex flex-shrink-0 justify-between">
        <p class="text-13 text-#8b8b8b font-500 leading-22">{{ $t('mobile.home.footer.help') }}</p>
        <div class="w-266 flex flex-wrap gap-20 text-13 color-hex-8b8b8b font-400 leading-22">
          <a href="https://docs.atomgit.com/" target="_blank">{{ $t('mobile.home.footer.title1') }}</a>
          <a href="https://docs.atomgit.com/agreements/privacy/" target="_blank">{{ $t('mobile.home.footer.title2') }}</a>
          <a href="https://docs.atomgit.com/agreements/terms-of-service/" target="_blank">{{ $t('mobile.home.footer.title3') }}</a>
        </div>
      </div>
    </div>
    <div class="h-76 p-20">
      <i18n-t keypath="mobile.footer.content" scope="global" tag="div" class="text-center text-12 color-hex-8B8B8B font-400 leading-18">
        <template #year>
          {{ today.getFullYear() }}
        </template>
      </i18n-t>
    </div>
  </footer>
</template>

<style lang="scss" scoped>
</style>
